<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   img {
       height:25px;
       width:90px;
   }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/jquery-1.11.1.js"></script>
<script type="text/javascript">
   $(function(){
	   
	   /* 
	      	校验用户名
	   */
	   $("#username").blur(function(){
		   var username = $("#username").val();
		   if(username == "") {
			  $("#errorUsername").html("用户名不能为空"); 
		   }else if(username.length < 2 || username.length > 15) {
			  $("#errorUsername").html("用户名长度必须为2~15之间"); 
		   }
	   })
	   
	   $("#username").focus(function(){
	       $("#errorUsername").html(""); 
	   })
	   
	   /* 
	      	校验密码
	   */
	    $("#password").blur(function(){
		   var password = $("#password").val();
		   if(password == "") {
			  $("#errorPassword").html("密码不能为空！"); 
		   }else if(password.length < 2 || password.length > 15) {
			  $("#errorPassword").html("密码长度必须为3~15之间！"); 
		   }
	   })
	   
	   $("#password").focus(function(){
	       $("#errorPassword").html(""); 
	   })
	   
	    /* 
	      	校验验证码
	   */
	    $("#verifyCode").blur(function(){
		   var verifyCode = $("#verifyCode").val();
		   if(verifyCode == "") {
			  $("#errorVerifyCode").html("验证码不能为空!"); 
		   }else if(verifyCode.length != 4) {
			  $("#errorVerifyCode").html("验证码长度必须为4!"); 
		   }
	   })
	   
	    $("#verifyCode").focus(function(){
	       $("#errorVerifyCode").html(""); 
	   })
   })
   
    function _change() {
	    $("#vCode").attr("src","");
	    $("#vCode").attr("src","<c:url value='/VerifyCodeServlet'/>?time = " + new Date().getTime());
	}
</script>
</head>
<body>
<h1>注册页面</h1>
<p style="color:red;font-weight: 800;">${msg}</p>
<!-- action="${pageContext.request.contextPath}/RegistServlet" -->
<form action="<c:url value='/RegistServlet'/>" method="post">
用户名：<input type="text" name="username" id="username" value=${user.username }>
     <span style="color: red;" id="errorUsername">${errors.username }</span><br><br>
密 &nbsp; &nbsp;   码:<input type="password" name="password" id="password" value=${user.password }>
                    <span style="color: red;" id="errorPassword">${errors.password}</span><br>
验 证  码:<input type="text" name="verifyCode" id="verifyCode" value=${user.verifyCode }>
            <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>" border="2"/>
            <a href="#" onclick = "_change();return false;">换一张</a>
            <span style="color: red;" id="errorVerifyCode">${errors.verifyCode }</span><br><br>
<input type="submit" name="submit" value="注册">
</form>
</body>
</html>